<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贵冶厂办席位卡打印系统</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", sans-serif;
        }
        
        body {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background: linear-gradient(135deg, #1a3a5f 0%, #2c5a8a 100%);
            padding: 20px;
            color: #333;
        }
        
        header {
            text-align: center;
            margin-bottom: 20px;
            padding: 20px 0;
            color: white;
        }
        
        h1 {
            color: #ffd700;
            margin-bottom: 10px;
            font-size: 2.5rem;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .print-tip {
            background: #ffeb3b;
            color: #333;
            padding: 15px;
            border-radius: 8px;
            margin: 15px auto;
            max-width: 800px;
            text-align: center;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            border: 2px solid #ff9800;
        }
        
        .print-tip strong {
            color: #e53935;
            font-size: 1.2em;
        }
        
        .font-tip {
            background: #4fc3f7;
            color: #01579b;
            padding: 15px;
            border-radius: 8px;
            margin: 15px auto;
            max-width: 800px;
            text-align: center;
            font-weight: bold;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            border: 2px solid #0288d1;
        }
        
        .font-tip a {
            color: #01579b;
            text-decoration: underline;
            font-weight: bold;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .input-section {
            padding: 25px;
            background: #f8f9fa;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .form-group {
            margin-bottom: 25px;
        }
        
        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
            color: #2c3e50;
            font-size: 18px;
        }
        
        textarea {
            width: 100%;
            min-height: 180px;
            padding: 15px;
            border: 2px solid #3498db;
            border-radius: 8px;
            font-size: 16px;
            resize: vertical;
        }
        
        .tip {
            font-size: 14px;
            color: #7f8c8d;
            margin-top: 8px;
        }
        
        .counter {
            display: inline-block;
            background: #e74c3c;
            color: white;
            padding: 3px 10px;
            border-radius: 20px;
            font-weight: bold;
            margin-left: 5px;
        }
        
        .actions {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            margin-top: 15px;
        }
        
        button {
            padding: 14px 28px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 18px;
            transition: all 0.3s;
            flex: 1;
            max-width: 220px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        button:hover {
            background: #2980b9;
            transform: translateY(-3px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        
        button:active {
            transform: translateY(1px);
        }
        
        #previewBtn {
            background: #27ae60;
        }
        
        #previewBtn:hover {
            background: #219653;
        }
        
        .preview-section {
            padding: 25px;
            flex: 1;
            display: none;
            background: #f1f5f9;
            flex-direction: column;
        }
        
        .preview-controls {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }
        
        .back-btn {
            background: #e74c3c;
            max-width: 180px;
        }
        
        .back-btn:hover {
            background: #c0392b;
        }
        
        .page-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 25px;
            padding: 15px;
            background: #e8edf3;
            border-radius: 10px;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        }
        
        .page {
            width: 210mm;
            height: 297mm;
            background: white;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
            position: relative;
            display: flex;
            flex-direction: column;
            page-break-after: always;
            border: 1px solid #bdc3c7;
        }
        
        .page-content {
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .name-card {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 99mm;
            border-bottom: 2px dashed #95a5a6;
            font-family: "FZDBSK", "方正大标宋_GBK", SimSun, serif;
            padding: 0 4cm;
            box-sizing: border-box;
            overflow: hidden;
        }
        
        .name-text {
            display: inline-block;
            width: 100%;
            text-align: justify;
            text-align-last: justify;
            letter-spacing: 0;
            word-spacing: 0;
            white-space: nowrap;
            overflow: hidden;
            font-family: "FZDBSK", "方正大标宋_GBK", SimSun, serif;
        }
        
        .page-footer {
            text-align: center;
            padding: 15px;
            font-size: 14px;
            color: #7f8c8d;
            background: #f8f9fa;
            border-top: 1px solid #e0e0e0;
        }
        
        .stats {
            background: #e8f4fc;
            padding: 15px;
            border-radius: 8px;
            margin-top: 15px;
            font-size: 16px;
            color: #2c3e50;
            border: 1px solid #3498db;
        }
        
        .stats strong {
            color: #e74c3c;
        }
        
        @media print {
            body {
                background: white !important;
                padding: 0 !important;
            }
            
            .input-section, .back-btn, .page-footer, header, .preview-controls, .stats, .print-tip, .font-tip {
                display: none !important;
            }
            
            .preview-section {
                display: block !important;
                padding: 0;
                background: transparent;
                border: none;
            }
            
            .page {
                box-shadow: none !important;
                margin: 0 !important;
                height: 297mm !important;
                width: 210mm !important;
                page-break-after: always !important;
                border: none !important;
            }
            
            .page-container {
                gap: 0 !important;
                padding: 0;
                margin: 0;
                background: transparent !important;
                box-shadow: none !important;
            }
            
            @page {
                size: A4;
                margin: 0;
            }
            
            .name-card {
                border-bottom: 2px dashed #000 !important;
                height: 99mm !important;
                padding: 0 4cm !important;
            }
            
            .name-text {
                font-family: "FZDBSK", "方正大标宋_GBK", SimSun, serif !important;
                text-align: justify !important;
                text-align-last: justify !important;
                white-space: nowrap !important;
            }
        }
    </style>
    
    <!-- 方正大标宋GBK字体CDN -->
    <style>
        @font-face {
            font-family: 'FZDBSK';
            font-style: normal;
            font-weight: normal;
            src: url('https://cdn.jsdelivr.net/gh/lxgw/kose-font@main/FZDBSK.TTF') format('truetype');
        }
    </style>
</head>
<body>
    <header>
        <h1>贵冶厂办席位卡打印系统</h1>
        <p class="subtitle">输入参会人员姓名，一键生成打印席位卡</p>
    </header>
    
    <div class="print-tip">
        <strong>打印设置提醒：</strong> 请选择<strong>双面打印 - 长边翻页</strong>以确保席位卡正反面正确对齐
    </div>
    
    <div class="font-tip">
        <strong>字体安装提醒：</strong> 为获得最佳打印效果，请安装<strong>方正大标宋_GBK</strong>字体
        <div style="margin-top: 10px; font-size: 14px;">
            <a href="https://www.foundertype.com/index.php/FindFont/search.html?keyword=大标宋" target="_blank">官方下载链接</a> | 
            <a href="https://www.fonts.net.cn/font-36839823658.html" target="_blank">字体网下载</a>
        </div>
    </div>
    
    <div class="container">
        <section class="input-section">
            <div class="form-group">
                <label for="nameInput">请输入姓名（用逗号、顿号或空格分隔）：<span class="counter" id="nameCounter">0</span></label>
                <textarea id="nameInput" placeholder="例如：张三,李四、王五 赵六">张三,李四,王五,李明,王小明,李雷,张伟,刘洋,陈晓,杨帆</textarea>
                <p class="tip">提示：系统会自动识别逗号、顿号、空格等分隔符，并自动统计姓名个数</p>
            </div>
            
            <div class="stats">
                已输入 <strong id="nameCount">0</strong> 个姓名，将生成 <strong id="sheetCount">0</strong> 张A4纸（共 <strong id="pageCount">0</strong> 页）
            </div>
            
            <div class="actions">
                <button id="previewBtn">
                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                        <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
                    </svg>
                    预览席位卡
                </button>
                <button id="printBtn">
                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                        <path d="M2.5 8a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1z"/>
                        <path d="M5 1a2 2 0 0 0-2 2v2H2a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h1v1a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-1h1a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-1V3a2 2 0 0 0-2-2H5zM4 3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2H4V3zm1 5a2 2 0 0 0-2 2v1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v-1a2 2 0 0 0-2-2H5zm7 2v3a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"/>
                    </svg>
                    打印席位卡
                </button>
            </div>
        </section>
        
        <section class="preview-section" id="previewSection">
            <div class="preview-controls">
                <button class="back-btn" id="backBtn">
                    <svg width="20" height="20" fill="currentColor" viewBox="0 0 16 16">
                        <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
                    </svg>
                    返回修改
                </button>
            </div>
            
            <div class="print-tip">
                <strong>打印设置提醒：</strong> 请选择<strong>双面打印 - 长边翻页</strong>以确保席位卡正反面正确对齐
            </div>
            
            <div class="font-tip">
                <strong>字体安装提醒：</strong> 为获得最佳打印效果，请安装<strong>方正大标宋_GBK</strong>字体
                <div style="margin-top: 10px; font-size: 14px;">
                    <a href="https://www.foundertype.com/index.php/FindFont/search.html?keyword=大标宋" target="_blank">官方下载链接</a> | 
                    <a href="https://www.fonts.net.cn/font-36839823658.html" target="_blank">字体网下载</a>
                </div>
            </div>
            
            <div class="stats">
                当前预览：共 <strong id="previewNameCount">0</strong> 个姓名，生成 <strong id="previewSheetCount">0</strong> 张A4纸（共 <strong id="previewPageCount">0</strong> 页）
            </div>
            
            <div class="page-container" id="pageContainer"></div>
        </section>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const nameInput = document.getElementById('nameInput');
            const previewBtn = document.getElementById('previewBtn');
            const printBtn = document.getElementById('printBtn');
            const backBtn = document.getElementById('backBtn');
            const previewSection = document.getElementById('previewSection');
            const pageContainer = document.getElementById('pageContainer');
            const nameCounter = document.getElementById('nameCounter');
            const nameCount = document.getElementById('nameCount');
            const sheetCount = document.getElementById('sheetCount');
            const pageCount = document.getElementById('pageCount');
            const previewNameCount = document.getElementById('previewNameCount');
            const previewSheetCount = document.getElementById('previewSheetCount');
            const previewPageCount = document.getElementById('previewPageCount');
            
            // 更新名字统计
            function updateNameStats() {
                const names = parseNames(nameInput.value);
                const count = names.length;
                const groups = Math.ceil(count / 3);
                const sheets = groups; // 纸张张数（每组名字对应一张纸）
                const pages = groups * 2; // 总页数（每张纸有正反两页）
                
                nameCounter.textContent = count;
                nameCount.textContent = count;
                sheetCount.textContent = sheets;
                pageCount.textContent = pages;
                
                if (previewSection.style.display === 'flex') {
                    previewNameCount.textContent = count;
                    previewSheetCount.textContent = sheets;
                    previewPageCount.textContent = pages;
                }
            }
            
            // 分割姓名
            function parseNames(input) {
                const regex = /[,，、\s]+/;
                return input.split(regex)
                    .map(name => name.trim())
                    .filter(name => name !== '');
            }
            
            // 生成席位卡页面
            function generateCards() {
                const names = parseNames(nameInput.value);
                if (names.length === 0) {
                    alert('请输入至少一个姓名');
                    return false;
                }
                
                pageContainer.innerHTML = '';
                
                // 为每组三个名字生成两页（正反面完全相同的页面）
                const groupCount = Math.ceil(names.length / 3);
                
                for (let groupIndex = 0; groupIndex < groupCount; groupIndex++) {
                    const groupNames = names.slice(groupIndex * 3, (groupIndex * 3) + 3);
                    
                    // 创建正面（与反面完全相同）
                    createPage(groupNames, groupIndex + 1);
                    
                    // 创建反面（与正面完全相同）
                    createPage(groupNames, groupIndex + 1);
                }
                
                // 更新预览统计
                previewNameCount.textContent = names.length;
                previewSheetCount.textContent = groupCount; // 纸张张数
                previewPageCount.textContent = groupCount * 2; // 总页数
                
                // 自动调整长名字的字体大小和间距
                setTimeout(adjustTextStyles, 100);
                
                return true;
            }
            
            // 创建单个页面
            function createPage(names, groupIndex) {
                const page = document.createElement('div');
                page.className = 'page';
                
                let cardsHTML = '';
                
                // 每页固定三个名字区域
                for (let j = 0; j < 3; j++) {
                    const name = names[j] || '';
                    cardsHTML += `
                        <div class="name-card" data-name="${name}">
                            <div class="name-text">${name}</div>
                        </div>
                    `;
                }
                
                page.innerHTML = `
                    <div class="page-content">
                        ${cardsHTML}
                    </div>
                    <div class="page-footer">
                        第${groupIndex}组 - 贵冶厂办席位卡
                    </div>
                `;
                
                pageContainer.appendChild(page);
            }
            
            // 调整长名字的字体大小和字符间距
            function adjustTextStyles() {
                const nameCards = document.querySelectorAll('.name-card');
                
                nameCards.forEach(card => {
                    const name = card.dataset.name;
                    if (!name) return;
                    
                    const nameText = card.querySelector('.name-text');
                    const length = name.length;
                    
                    // 字体大小映射表
                    const fontSizeMap = {
                        1: 120,
                        2: 120,
                        3: 120,
                        4: 95,
                        5: 85,
                        6: 75,
                        7: 65,
                        8: 55,
                        9: 50,
                        10: 45
                    };
                    
                    // 字符间距映射表（针对4字及以上名字）
                    const letterSpacingMap = {
                        4: -0.05,
                        5: -0.08,
                        6: -0.10,
                        7: -0.12,
                        8: -0.14,
                        9: -0.16,
                        10: -0.18
                    };
                    
                    // 设置字体大小
                    const fontSize = fontSizeMap[Math.min(length, 10)] || 40;
                    nameText.style.fontSize = `${fontSize}pt`;
                    
                    // 针对4字及以上名字调整字符间距
                    if (length >= 4) {
                        const spacing = letterSpacingMap[Math.min(length, 10)] || -0.2;
                        nameText.style.letterSpacing = `${spacing}em`;
                    }
                    
                    // 针对长名字添加内边距
                    if (length > 4) {
                        card.style.padding = '0 3.5cm';
                    }
                });
            }
            
            // 实时更新名字统计
            nameInput.addEventListener('input', updateNameStats);
            
            // 初始化统计
            updateNameStats();
            
            // 预览席位卡
            previewBtn.addEventListener('click', function() {
                if (generateCards()) {
                    previewSection.style.display = 'flex';
                }
            });
            
            // 直接打印
            printBtn.addEventListener('click', function() {
                if (generateCards()) {
                    setTimeout(() => {
                        previewSection.style.display = 'flex';
                        setTimeout(() => {
                            window.print();
                        }, 100);
                    }, 100);
                }
            });
            
            // 返回修改
            backBtn.addEventListener('click', function() {
                previewSection.style.display = 'none';
            });
        });
    </script>
</body>
</html>
